<script src="https://fastly.jsdelivr.net/npm/three@0.145.0"></script>
<script src="https://fastly.jsdelivr.net/npm/three@0.145.0/examples/js/controls/OrbitControls.js"></script>
<script src="https://fastly.jsdelivr.net/npm/three@0.145.0/examples/js/loaders/GLTFLoader.js"></script>

<body></body>
<style>
    body {
        margin: 0;
    }
</style>
<script>
    setTimeout(function () {

        var scene = new THREE.Scene();

        var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.set(0, 10, 15);
        camera.lookAt(0, 0, 0);

        var renderer = new THREE.WebGLRenderer();

        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setClearColor(0xb9d3ff, 1);
        document.body.appendChild(renderer.domElement);

        new THREE.OrbitControls(camera, renderer.domElement);

        // 记录纹理
        var textures = {};
        var crtTexture = function (imgName) {
            var curTexture = textures[imgName];
            if (!curTexture) {
                curTexture = new THREE.TextureLoader().load('./data/MachineRoom/' + imgName);
                curTexture.flipY = false;
                curTexture.wrapS = 1000;
                curTexture.wrapT = 1000;
                textures[imgName] = curTexture;
            }
            return curTexture;
        };

        // 机柜集合
        var cabinets = [];

        var gltfLoader = new THREE.GLTFLoader();
        gltfLoader.load("./data/MachineRoom/machineRoom.gltf", function (data) {

            data.scene.children.forEach(function (obj) {
                if (obj.material.map) {
                    obj.material = new THREE.MeshBasicMaterial({
                        map: crtTexture(obj.material.map.name)
                    });
                } else {
                    obj.material = new THREE.MeshBasicMaterial({
                        color: obj.material.color
                    });
                }

                // 把名称包含cabinet记录起来
                // 其实就是把机箱记录起来
                if (obj.name.includes("cabinet")) {
                    cabinets.push(obj);
                }
            });

            scene.add(...data.scene.children);
        });

        (function display() {
            renderer.render(scene, camera);
            requestAnimationFrame(function () {
                display();
            });
        })();

        var raycaster = new THREE.Raycaster();
        var pointer = new THREE.Vector2();

        crtTexture("cabinet-hover.jpg");

        var preIntersect = null;
        document.body.addEventListener("mousemove", function (event) {
            var x = event.clientX, y = event.clientY;

            // 鼠标的canvas坐标转裁剪坐标
            // 其实就是把鼠标位置转成webgl坐标
            pointer.set((x / window.innerWidth) * 2 - 1, -(y / window.innerHeight) * 2 + 1);

            // 基于鼠标点的裁剪坐标位和相机设置射线投射器
            raycaster.setFromCamera(pointer, camera);

            // 选择
            var intersect = raycaster.intersectObjects(cabinets)[0];

            if (preIntersect) {
                preIntersect.object.material.setValues({
                    map: textures["cabinet.jpg"]
                });
                preIntersect = null;
            }

            if (intersect) {

                intersect.object.material.setValues({
                    map: textures["cabinet-hover.jpg"]
                });

                preIntersect = intersect;
            }
        });


    }, 200);

</script>